<template>
	<div class="Echarts"> 
		<div ref="myChart" id="myChart"  class="inMain" style="width: 410px;height: 169px;"></div>
	</div>
</template>
 
<script>
	export default {
		name: 'internationEc3',
		data() {
			return{
				cockpitData:[],
				lengNum:0
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
						"normGuid": "cd155611-7224-47e7-883f-f8aef973798b",
						"fieldList": [{"key":"statictype","value":"新材料-省-排名-数量"}]
					}
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				_this.cockpitData=result.cockpitData
				_this.$nextTick(()=>{
					_this.myEcharts();
				})
			},
			myEcharts() {
				let itemData = this.cockpitData.map(item=>{
					return item.total;
				});
				let itemTitle = this.cockpitData.map(item=>{
					return item.province;
				});
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;
				let myColor=['#04CDF4','#E3A693','#D5A4E2','#FACD91','#1D96FC','#5B7082']
				let datalist=[];
				let lengNum=10;
				let sumNum=0;
				for (let i in itemTitle) {
					sumNum+=itemData[i]
					let	label={
							show:true,
							fontSize: 15,
							color: '#DFF8FF',
							formatter: function (params) {
								let p =(itemData[i] / sumNum*100 ).toFixed(0);
								return itemData[i]+'项 '+' '+ '{a|' + p + '%' + '}';
							},
							rich:{
								a:{
									fontSize: 15,
									color: '#00D8FF ',
								}
							}
						}
					datalist.push({
							value: itemData[i],
							name: itemTitle[i],
							label:label
						})
				}
				//配置图表
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				const option = {
					// backgroundColor: '#031026',
					color:myColor,
					title:{
						show:false,
						x: '1%',
						y: '1%',
						text: '{a|' + '全国前5名占比' + '}',
						textStyle:{
							color:'#FFFFFF',
							fontSize: 15,
							lineHeight: 20,
							rich:{
								a:{
									fontSize: 20,
									color: '#00D8FF ',
								}
							}
						},
					},
					tooltip: {
						trigger: 'item',
						formatter:function(params){
							
							lengNum=params.dataIndex
							// console.log(lengNum)
							// this.lengNum=params.dataIndex
							return params
						} 
					},
					legend: {
						show: true,
						// orient: 'vertical',
						selectedMode:false,
						itemWidth: 10,
						itemHeight: 10,
						left: 'center',
						bottom:'3%',
						itemGap:10,
						textStyle: {
						      color: "#FFFFFF",
							  fontSize:13,
							  rich:{
								  1:{
									color: "red",  
								  },
								  2:{
									 color: "yellow", 
								  }
							  }
						},
						formatter: function(name){
							return name
							// switch(name){
							// 	case '江苏省':
							// 		return "{"+lengNum+"|"+name+"}";
							// 		break;
							// 	case '广东省':
							// 		return "{"+lengNum+"|"+name+"}";
							// 		break;
							// 	case '上海市':
							// 		return "{"+lengNum+"|"+name+"}";
							// 		break;
							// 	case '浙江省':
							// 		return "{"+lengNum+"|"+name+"}";
							// 		break;
							// 	case '北京市':
							// 		return "{"+lengNum+"|"+name+"}";
							// 		break;
							// 	default:
							// 		return "{"+lengNum+"|"+name+"}";
							// 		break;
							// }
							
						}
					},
					grid: { 
						left: '3%',
						top: '10%',
						width: "100%",
						height:'90%',
						containLabel: true
					},
					series: [{
					      type: 'pie',
					      radius: ['37%','55%'],
						  center:['47%','42%'],
						  itemStyle: {
						     borderColor: '#031026',
						     borderWidth: 2
						  },
					      data: datalist, 
					    }]
				};

				myChart.setOption(option);
			}
		}
		
	}
</script>


<style>

</style>
